
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
    <head>
        <meta charset='utf-8'>
        <script src='lib/esl.js'></script>
        <script src='lib/config.js'></script>
        <script src='lib/jquery.min.js'></script>
        <script src='lib/facePrint.js'></script>
        <script src='http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM'></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                height: 100%;
                margin: 0;
            }
            #pause-resume {
                position: absolute;
                left: 10;
                top: 10;
            }
            #info {
                position: fixed;
                left: 0;
                bottom: 0;
                height: 30px;
                line-height: 30px;
                color: yellow;
                font-size: 20px;
            }
        </style>
        <div id="main"></div>
        <div id="info"></div>
        <button id="pause-resume">Pause/Resume</button>
        <script>

            require([
                'echarts',
            ], function (echarts) {

                // 这里有一个get请求来获取json数据，所以需要开一个http服务
                $.get('../map/json/china.json', function (chinaJson) {
               
                    echarts.registerMap('china', chinaJson);
                    var myChart = echarts.init(document.getElementById('main'));
                    $.get('../map/json/result8.json', function (data) { // 这里是获取连线的数据
                    var hStep = 300 / (data.length - 1);
                    var obj = eval(data);// 解析json数据
                    var busLines=[];
                       for(var i=0;i<obj.length;i++){
                        var points = [];
                            for(var j=0;j<obj[i].Mnst.length;j++){
                                // 这里有一个坑我必须说明一下 我的数据result8.json里经纬度反了，所以这里取值的时候先取的value[1],再取的value[0]
                                points.push([obj[i].Mnst[j].value[1], obj[i].Mnst[j].value[0]]);
                            }
                            // 这里在组装连线的数据，下面将用到
                        busLines.push({
                            coords: points,// 坐标这个数据是必须给的
                            name:obj[i].name,// 类似name还可以根据自己的需求给更多的数据
                            lineStyle: { //给每条线都不同的样式
                                normal: {
                                    color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * i))
                                }
                            }
                        });
                    };
                console.log(busLines); // 打开浏览器控制台可以看到的输出的buslines，用于测试
                    
                    var series = [];
                    // 这里的series也是echarts绘图很关键的一部分，下面将用到
                    // series是一个数组，你要画几种图series就有几个元素
                        series.push(
                            {// 这个就是普通连线
                            type: 'lines',
                            coordinateSystem: 'geo',// 这句的意思是连线是基于地理坐标的,geo组件将在下面给出
                            polyline: true,// 这表示连线是否为多端点的连线
                            data: busLines,// 这里就是连线的数据了 上面组装的数据就在这里使用
                            lineStyle: {
                                normal: {
                                    opacity: 1,
                                    width: 2
                                }
                            },
                            progressiveThreshold: 500,
                            progressive: 200
                        }, {
                            type: 'lines',// 这里还有一个连线其实是做的在线上的一个流动效果，运行代码注意观察你就会看到
                            coordinateSystem: 'geo',
                            polyline: true,
                            data: busLines,
                            lineStyle: {
                                normal: {
                                    width: 0
                                }
                            },
                            effect: {
                                constantSpeed: 20,
                                show: true,
                                trailLength: 0.1,
                                symbolSize: 1.5
                            },
                            zlevel: 1
                        });
                    // setoption就是这里面最主要的东西了，上面的准备都是为了这里
                    myChart.setOption({
                        backgroundColor: '#404a59',// 这些设置去官网看手册就知道了
                        animation: false,
                        title: {
                            text: '高铁网络',
                            subtext: 'data from ',
                            sublink: '',
                            left: 'center',
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter:function(params, ticket, callback){
                               if(params.seriesType=="lines")
                                    return params.data.name;
                            }
                        },
                        geo: {  // geo组件
                            map: 'china',
                            label: {
                                normal: {
                                    show: true,
                                    formatter: '{a}',
                                    // position: 'inside',
                                    backgroundColor: '#fff',
                                    padding: [3, 5],
                                    borderRadius: 3,
                                    borderWidth: 1,
                                    borderColor: 'rgba(0,0,0,0.5)',
                                    color: '#777'
                                },
                                emphasis: {
                                    areaColor: '#2a333d'
                                }
                            },
                            selectedMode: 'single',
                            roam: true,
                            itemStyle: {
                                normal: {
                                    areaColor: '#323c48',
                                    borderColor: '#404a59'
                                },
                                emphasis: {
                                    areaColor: '#2a333d'
                                }
                            }
                        },
                        series: series// 上面的组装的series在这里使用
                    });

                    myChart.on('geoselectchanged', function (param) {
                        var selected = [];
                        echarts.util.each(param.selected, function (v, key) {
                            v && selected.push(key);
                        });
                        document.getElementById('info').innerHTML = 'SELECTED: ' + selected.join(', ');
                    });

                    var isPaused = false;
                    document.getElementById('pause-resume').onclick = function () {
                        myChart.getZr().animation[isPaused ? 'resume' : 'pause']();
                        isPaused = !isPaused;
                    };
                },
                );
            })
                });
             
        </script>
    </body>
</html>
